<template>
	<view class="">
		<view class="basic-tabs">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				active-color="#20b86f" swiperWidth="750"></u-tabs-swiper>
		</view>
		<view class="swiper-item" v-show="current == 0">
			<view class="">
				<u-cell-item arrow-direction="down" title="城市" :value="personInfo.city?personInfo.city:'请选择'" @click="showCity = true"></u-cell-item>
				<u-cell-item arrow-direction="down" title="区域" :value="personInfo.districts?personInfo.districts:'请选择'" @click="showArea = true"></u-cell-item>
			</view>
			<u-field v-model="personInfo.high_school_name" label="高中名称" input-align="right" placeholder="请输入高中名称">
			</u-field>
			<u-field v-model="personInfo.user_name" label="姓名" input-align="right" placeholder="请输入姓名">
			</u-field>
			<u-field v-model="personInfo.mobile" label="手机号" input-align="right" placeholder="请填输入手机号" disabled>
			</u-field>
			<view class="basic-btn" @click="saveInfo()">
				提交
			</view>
			<view>1、请登记真实的高中名称，我们后续有线下志愿填报公益讲座的时候，能够准确通知到各位同学和家长；亦会组建相应的群帮助大家找到一起上大学的伙伴。</view>
			<view class="basic-text1">2、使用卡密登录的用户无法找回密码，遗失账号密码，将无法登陆系统。所以请验证手机号码并重新设置密码，以便可使用手机号码作为账号，并输入新的密码即可登录系统使用。</view>
		</view>
		<view class="swiper-item1" v-show="current == 1">
			<view class="swiper-item-content1">
				<veiw class="swiper-item-text">我的区内--排名：{{personInfo.ranking_in?personInfo.ranking_in:0}} 分数：{{personInfo.total_in?personInfo.total_in:0}}</veiw>
				<view class="swiper-item-text">我的区外--排名：{{personInfo.ranking_out?personInfo.ranking_out:0}} 分数：{{personInfo.total_out?personInfo.total_out:0}}</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label swiper-item-label1">科目类型：</view>
					<view class="swiper-item-input">
						<u-radio-group v-model="personInfo.subject_type" @change="radioChange">
							<u-radio :name="1" :disabled="false">
								理工科
							</u-radio>
							<u-radio :name="2" :disabled="false">
								文史科
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label">语文成绩：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.chinese" :clearable="false" placeholder='请输入语文成绩'/>
					</view>
				</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label">数学成绩：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.math" :clearable="false" placeholder='请输入数学成绩' />
					</view>
				</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label">英语成绩：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.english" :clearable="false" placeholder='请输入英语成绩' />
					</view>
				</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label">综合成绩：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.synthesize" :clearable="false" placeholder='请输入综合成绩' />
					</view>
				</view>
			</view>
			<u-divider half-width="1000" class="basic-fivider">总分：{{parseInt(personInfo.chinese)+parseInt(personInfo.math)+parseInt(personInfo.english)+parseInt(personInfo.synthesize)}}</u-divider>
			<view class="swiper-item-content1">
				<view class="swiper-item-text">
					<view class="swiper-item-label">区外高校加分：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.in_number" :clearable="false" placeholder='请输入分值' />
					</view>
				</view>
				<view class="swiper-item-text">
					<view class="swiper-item-label">区内高校加分：</view>
					<view class="swiper-item-input1">
						<u-input v-model="personInfo.out_number" :clearable="false" placeholder='请输入分值' />
					</view>
				</view>
			</view>
			<view class="basic-notes">
				*2020年高考成绩公布后，用户仅有一次修改成绩的机会，请认真填写避免出错。
			</view>
			<view class="basic-btn" @click="save_my_grade()">
				提交
			</view>
		</view>
		
		<u-select v-model="showCity" :list="cityList" @confirm="confirm1"
			confirm-color="#20b86f"></u-select>
		<u-select v-model="showArea" :list="AreaList" @confirm="confirm2"
			confirm-color="#20b86f"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '个人资料'
				}, {
					name: '我的成绩'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				showCity: false,
				showArea: false,
				typeValue: '',
				personInfo:{
					act_type: 1,
					city: '',
					districts: '',
					mobile: '',
					user_name: '',
					high_school_name: ''
				},
				AreaList: [],
				cityList: []
			}
		},
		onLoad(options) {
			if(options.current == 1){
				this.current = 1;
			}
			this.my_city_data();
			this.check_my_info();
		},
		methods: {
			goto(name) {
				uni.navigateTo({
					url: name
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			confirm1(e) {
				this.personInfo.city = e[0].label;
				this.my_districts_data(e[0].label);
			},
			confirm2(e) {
				this.personInfo.districts = e[0].label;
			},
			// 选中任一radio时，由radio-group触发
			radioChange(e) {
				// setTimeout(() => {
					// this.saveInfo();
				// })
			},
			// 获取城市列表
			my_city_data() {
				this.http({
					url: `api/v1/users/my_city_data`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							this.cityList = [];
							for (let s of res.result.cityList) {
								let item = {
									value: s.adcode,
									label: s.name
								}
								this.cityList.push(item);
							}
						}
					},
				})
			},
			my_districts_data(ad_name) {
				this.http({
					url: `api/v1/users/my_districts_data?ad_name=${ad_name}`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							this.AreaList = [];
							for (let s of res.result.districts) {
								let item = {
									value: s.adcode,
									label: s.name
								}
								this.AreaList.push(item);
							}
						}
					},
				})
			},
			// 获取个人信息
			check_my_info() {
				this.http({
					url: `api/v1/users/check_my_info`,
					method: 'GET',
					success: res => {
						if(res.errcode == 0) {
							if(res.result.grade_detail){
								this.personInfo = {
									act_type: 1,
									id: res.result.grade_detail.id,
									admin_users_id: res.result.grade_detail.admin_users_id,
									env_type: res.result.grade_detail.env_type,
									to_year: res.result.grade_detail.to_year,
									mobile: res.result.grade_detail.mobile,
									user_name: res.result.grade_detail.user_name,
									fraction_number: 0,
									high_school_name: res.result.grade_detail.high_school_name,
									ranking_in: res.result.ranking.ranking_in,
									ranking_out: res.result.ranking.ranking_out,
									total_in: res.result.ranking.total_in,
									total_out: res.result.ranking.total_out,
									subject_type: res.result.grade_detail.subject_type,
									chinese: res.result.grade_detail.chinese,
									math: res.result.grade_detail.math,
									english: res.result.grade_detail.english,
									synthesize: res.result.grade_detail.synthesize,
									in_number: res.result.grade_detail.in_number,
									out_number: res.result.grade_detail.out_number,
									city: res.result.grade_detail.city,
									districts: res.result.grade_detail.districts
								}
								this.my_districts_data(res.result.grade_detail.city);
							}else {
								this.personInfo.mobile = uni.getStorageSync('phone');
							}
						}
					},
				})
			},
			// 保存信息
			saveInfo() {
				this.http({
					url: `api/v1/users/save_or_get_code_data`,
					method: 'POST',
					data: this.personInfo,
					success: res => {
						if(res.status == 1) {
							wx.showToast({
							  title: '成功',
							  icon: 'none',
							  duration: 2000
							})
							this.check_my_info();
						}else {
							wx.showToast({
							  title: res.info,
							  icon: 'none',
							  duration: 2000
							})
						}
					},
				})
			},
			// 保存成绩
			save_my_grade() {
				this.http({
					url: `api/v1/users/save_my_grade`,
					method: 'POST',
					data: this.personInfo,
					success: res => {
						if(res.status == 1) {
							uni.showToast({
								icon: 'none',
								title: '提交成功'
							})
							this.check_my_info();
						}else {
							uni.showToast({
								icon: 'none',
								title: res.info
							})
						}
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.basic-tabs {
		margin: 0 80rpx;
	}

	.swiper-item {
		padding: 30rpx;

		.basic-text1 {
			color: #f90303;
			margin-top: 20rpx;
		}
	}
	
	.basic-btn {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #00ca8a;
		color: #FFFFFF;
		text-align: center;
		margin: 60rpx 100rpx;
		border-radius: 100px;
	}
	.basic-btn:active {
		opacity: .6;
	}

	.swiper-item1 {
		margin: 30rpx;
		text-align: center;

		.swiper-item-content1 {
			padding: 0 60rpx;
		}

		.swiper-item-text {
			margin-top: 26rpx;
		}
		.swiper-item-label {
			display: inline-block;
			width: 200rpx;
			text-align: right;
		}
		.swiper-item-label1 {
			float: left;
			margin-top: 8rpx;
		}
		.swiper-item-input {
			display: inline-block;
			width: calc(100% - 200rpx);
		}
		.swiper-item-input1 {
			display: inline-block;
			width: calc(100% - 200rpx);
			border: 1px solid #f1f1f1;
			border-radius: 7px;
			padding: 0 10rpx;
		}
		.basic-fivider {
			float: left;
			width: 100%;
			margin: 40rpx 0;
		}
		.basic-notes {
			color: #f90303;
			text-align: left;
			margin: 30rpx 0;
		}
	}
</style>
